<template>
  <div class="login-container">
    <el-card style="width: 400px; padding: 10px 20px;">
      <el-form ref="formRef" :rules="data.rules" :model="data.form">
        <div style="text-align: center; font-size: 24px; font-weight: bold; margin-bottom: 20px">欢迎登录课程管理系统</div>
        <el-form-item prop="username">
          <el-input class="el-input" size="large" v-model="data.form.username" placeholder="学号/工号/用户名"  prefix-icon="User"/>
        </el-form-item>
        <el-form-item prop="password">
          <el-input size="large" v-model="data.form.password" type="password" placeholder="请输入密码"  prefix-icon="Lock"/>
        </el-form-item>
        <el-form-item>
          <el-radio-group class="custom-radio" v-model="data.form.role">
            <el-radio value="STU">学生</el-radio>
            <el-radio value="TEA">教师</el-radio>
            <el-radio value="ADMIN">管理员</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-button @click="login" type="primary" style="width: 100% ; height: 40px">登 录</el-button>
      </el-form>
    </el-card>
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue'
import request from "@/utils/request.js";
import {ElMessage} from "element-plus";
import router from "@/router/index.js";

const formRef = ref()

const data = reactive({
  form: {
    role: "STU"
  },
  rules: {
    username: {
      required: true,
      message: "请输入账号/工号/用户名",
      trigger: "blur"
    },
    password: {
      required: true,
      message: "请输入密码",
      trigger: "blur"
    }
  }
})

const login = () => {
  formRef.value.validate(async (valid) => {
    if(valid) {
      request.post("login", data.form).then(res => {
        if(res.code === "200") {
          ElMessage.success("登录成功")
          setTimeout(() => {
            switch (res.data.role) {
              case "STU":
                request.get("student/getInfo/" + res.data.username).then(res => {
                  localStorage.setItem("student", JSON.stringify(res.data))
                  router.push("/student/home");
                })
                break;
              case "TEA":
                localStorage.setItem("teacher", JSON.stringify(res.data));
                router.push("/teacher/home");
                break;
              case "ADMIN":
                localStorage.setItem("admin", JSON.stringify(res.data));
                router.push("/admin/home");
                break;
            }
          }, 500)
        } else {
          ElMessage.error(res.msg)
        }
      })
    }
  })
}
</script>

<style>
.login-container {
  height: 100vh;
  overflow: hidden;
  background: url("@/assets/login-bg.jpg");
  background-size: cover;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.el-input {
  width: 100%;
  display: flex;
}
.custom-radio {
  display: flex;
  margin-left: 12px;
  width: 100%;
}
.custom-radio .el-radio {
    transform: scale(1.1); /* 放大1.2倍 */
    margin-right: 60px; /* 调整间距 */
}
</style>